<template>
    <div class="article-comments">
      <!-- 评论列表 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :error="error"
        error-text="请求失败，点击重新加载"
        :immediate-check="false"
        @load="onLoad"
      >
        <!-- <van-cell v-for="(comment ,index) in list" :key="index" >
          <van-image
            slot="icon"
            round
            width="30"
            height="30"
            style="margin-right: 10px;"
            :src="comment.aut_photo"
          />
          <span style="color: #466b9d;" slot="title">{{comment.aut_name}}</span>
          <div slot="label">
            <p style="color: #363636;">{{comment.content}}</p>
            <p>
              <span style="margin-right: 10px;">{{  comment.pubdate | relativeTime }}</span>
              <van-button size="mini" type="default">回复</van-button>
            </p>
          </div>
          <van-icon slot="right-icon" name="like-o" /> -->
          <comment-item v-for="(comment ,index) in list" :key="index" :comment="comment"
          @reply-click="$emit('reply',$event)"
          ></comment-item>
      </van-list>
      <!-- 评论列表 -->

      <!-- 发布评论 -->
      <!-- <van-cell-group class="publish-wrap">
        <van-field clearable placeholder="请输入评论内容">
          <van-button slot="button" size="mini" type="info">发布</van-button>
        </van-field>
      </van-cell-group> -->
      <!-- /发布评论 -->
    </div>
  </template>

<script>
import CommentItem from '../components/comment-item.vue'
import { getComments } from '@/api/comment'
export default {
  name: 'ArticleComment',
  props: {
    articleId: {
      type: [Number, String, Object],
      required: true
    },
    list: {
      type: Array,
      default: () => []

    },
    type: {
      type: String,
      validator (value) {
        return ['a', 'c'].includes(value)
      },
      default: 'a'
    }
  },
  components: {
    CommentItem
  },
  data () {
    return {
      // list: [], // 评论列表
      error: false,
      loading: false, // 上拉加载更多的 loading
      finished: false, // 是否加载结束
      offset: null
    }
  },
  created () {
    this.onLoad()
  },

  methods: {
    async  onLoad () {
      this.loading = true
      try {
        const { data } = await getComments({
          type: this.type, // 评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
          source: this.articleId, // 源id，文章id或评论id
          offset: this.offset, // 获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
          limit: 10 // 每页
        })

        const results = data.data.results
        this.list.push(...results)
        if (results.length) {
          this.offset = data.data.last_id
        } else {
          this.finished = true
        }
        this.$emit('comment-successLoad', data.data)
      } catch (err) {
        window.console.log(err)
        this.error = true
      }
      this.loading = false
    }
  }
}
</script>

  <style scoped lang="less">
    .publish-wrap {
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
    }

    .van-list {
      margin-bottom: 45px;
    }
  </style>
